<template>
    <div class="dashboard">
        <!-- 欢迎卡片 -->
        <el-row :gutter="24">
            <el-col :span="16">
                <el-card class="welcome-card">
                    <div class="welcome-text">欢迎使用 竞成网络安全漏洞平台</div>
                    <img src="../assets/images/image1.jpg" alt="Welcome" class="welcome-image" />
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <h3>近期比赛</h3>
                    <el-table :data="tableData" border style="">
                        <el-table-column prop="date" label="开始时间" width="" />
                        <el-table-column prop="name" label="作业比赛名称" width="" />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

        <!-- 公告板 -->
        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="16">
                <el-card>
                    <announcement-board />
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <h3>支持的远程评测平台</h3>
                    <el-carousel :interval="4000" type="card" height="100px">
                        <el-carousel-item v-for="item in platforms" :key="item.name">
                            <el-link :href="item.url" target="_blank" style="display: block; text-align: center;">
                                <h4>{{ item.name }}</h4>
                            </el-link>
                        </el-carousel-item>
                    </el-carousel>
                </el-card>
            </el-col>
        </el-row>

        <!-- 图表 -->
        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="16">
                <el-card>
                    <div class="chart">
                        <div ref="chartRef" style="width: 100%; height: 300px;"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 最新题目 -->
        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="16">
                <el-card>
                    <h3>最新题目</h3>
                    <el-table :data="latestProblems">
                        <el-table-column prop="id" label="题目ID"></el-table-column>
                        <el-table-column prop="name" label="标题"></el-table-column>
                        <el-table-column prop="difficulty" label="发布时间"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import AnnouncementBoard from '../components/announcement-board.vue';
import * as echarts from 'echarts';

export default {
    components: {
        AnnouncementBoard,
    },
    data() {
        return {
            tableData: [
                {
                    date: '2025-03-03',
                    name: '动态规划专题',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2025-03-02',
                    name: '比赛内测场',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2025-03-04',
                    name: 'CSRF漏洞POC改造',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2025-03-01',
                    name: '反射型跨站脚本',
                    address: 'No. 189, Grove St, Los Angeles',
                },
            ],
            latestProblems: [
                { id: 'Z104', name: 'BF算法', difficulty: '15天前' },
                { id: 'OJM-1021SA', name: 'Rooms and Passages', difficulty: '1个月前' },
                // 更多题目...
            ],
            platforms: [
                { name: 'webgoat', url: 'https://owasp.org/www-project-webgoat/' },
                { name: 'POJ', url: 'http://poj.org/' },
                { name: 'gzctf', url: 'https://gctf.gztu.edu.cn/' },
                // 更多平台...
            ],
            myChart: null, // 用于存储 ECharts 实例
            chartOption: {
                title: {
                    text: '最近一周提交统计'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['总数', '通过']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '通过',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [12, 13, 10, 13, 9, 23, 21]
                    },
                    {
                        name: '总数',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [22, 18, 19, 23, 29, 33, 31]
                    }
                ]
            }
        };
    },
    mounted() {
        this.initChart();
    },
    beforeUnmount() {
        if (this.myChart) {
            this.myChart.dispose();
        }
    },
    methods: {
        initChart() {
            // 获取 DOM 元素
            const chartDom = this.$refs.chartRef;
            this.myChart = echarts.init(chartDom);
            this.myChart.setOption(this.chartOption); // 设置配置
        }
    }
};
</script>

<style>
.dashboard {
    padding: 20px;
}

.welcome-card {
    margin-bottom: 20px;
}

.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

.welcome-image {
    width: 100%;
    height: auto;
}

.welcome-text {
    font-weight: bold;
    text-align: center;
    margin-top: 2px;
    font-size: 24px;
    color: #0b4d75;
}

.chart {
    height: 300px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.index_one {
    color: #fec412;
    background-image: url(../assets/images/gold.jpg);
}

.index_two {
    color: #b4c0c7;
    background-image: url(../assets/images/sliver.jpg);
}

.index_three {
    color: #714e3a;
    background-image: url(../assets/images/tong.jpg);
}
</style>